import {Flex,Row,Col} from 'antd';
import { useEffect, useState,useRef } from 'react';

// 本地图片引入，推荐用import ，也可以用require
import card01 from '../assets/imgs/card01.gif'
import card02 from '../assets/imgs/card02.gif'
import card03 from '../assets/imgs/card03.gif'
import card04 from '../assets/imgs/card04.gif'

import OrderCard from '../component/OrderCard/OrderCard'
import Pannel from '../component/Pannel/Pannel'

import * as echarts from 'echarts'; //4.

function AdminIndex(props){
    const [order_card_list,setOrderCardList] = useState([]);
    // 1.
    const charts_box = useRef(null); //创建一个ref(原生的dom对象)

    //第一个渲染，发请求
    useEffect(()=>{
        //组件加载完成后，会执行一次，取动态的数据
        let list = [
            {
                title:"总订单",
                cash:10240000,
                pic:card01
            },
            {
                title:"总订单额",
                cash:30000000,
                pic:card02
            },
            {
                title:"今日订单",
                cash:1000,
                pic:card03
            },
            {
                title:"今日总额",
                cash:20000000,
                pic:card04
            }
        ]
        setTimeout(()=>{
           setOrderCardList([...list])
        },0)

        //3.在 useEffect hooks 中获取dom， (charts_box.current)
        console.log(charts_box,charts_box.current)
        
        let box = charts_box.current;
        // 5.设置图表数据
        var myChart = echarts.init(box);
        var option;

        option = {
        title: {
            text: '订单数据统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
            saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        //坐标对应的数据
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
        };

        option && myChart.setOption(option);
        //echarts 结束

    },[])
    
    return (
        <Flex vertical="true" gap="middle">
            <Row>
                <Col span={24}>
                    <Flex justify="space-between" className="data_card" gap="middle">
                        
                        {/* <Flex className="item" flex="1" justify="space-between" align="center">
                        <div className="pic">
                            <img src={card01}  className="pic"/>
                        </div>
                        <div>
                            <h2>总订单</h2>
                            <p>10000</p>
                        </div>
                        </Flex>

                        <Flex className="item" flex="1" justify="space-between" align="center">
                        <img src={card02}  className="pic"/>
                        <div>
                            <h2>总订单额</h2>
                            <p>3000000</p>
                        </div>
                        </Flex>

                        <Flex className="item" flex="1" justify="space-between" align="center">
                            <img src={require('../assets/imgs/card03.gif')}  className="pic"/>
                        <div>
                            <h2>今日订单</h2>
                            <p>400</p>
                        </div>
                        </Flex>

                        <Flex className="item" flex="1" justify="space-between" align="center">
                        <img src={require('../assets/imgs/card04.gif')}  className="pic"/>
                        <div>
                            <h2>今日订单额</h2>
                            <p>302400</p>
                        </div>
                        </Flex> */}

                    
                        {/* <OrderCard title="总订单1" num={1000} pic={card01} />
                        <OrderCard title="总订单2" num={1000} pic={card02} />
                        <OrderCard title="总订单3" num={1000} pic={card03} />
                        <OrderCard title="总订单4" num={1000} pic={card04} /> */}
                        
                        {
                            // order_card_list.map((v,k)=><OrderCard title={v.title} num={v.cash} pic={v.pic} />)
                            order_card_list.map((v,k)=>{
                                return (<OrderCard title={v.title} num={v.cash} pic={v.pic} key={'card_'+k}/>)
                            })
                            // 当箭头函数只有一第语句，并且是return的，哪第可以省略{}、return
                        }
                    </Flex>
        
                </Col>
            </Row>
            <Row>
                <Col span={24}>
                    {/* 2.ref 属性 指向 ref对象 */}
                    <Pannel>
                        <div ref={charts_box} style={{minHeight:"450px"}}></div>
                    </Pannel>
                </Col>
            </Row>
        </Flex>
    )
}

export default AdminIndex;